<template>
  <div class="body">
    <div class="main  animated fadeInUp" :class="{ 'sign-up-mode': isSignUpMode }">
      <!-- 包含登录和注册表单的容器 -->
      <div class="box">
        <!-- 包含登录和注册表单的内部容器 -->
        <div class="inner-box">
          <!-- 包含登录和注册表单的表单容器 -->
          <div class="forms-wrap">
            <!-- 登录表单 -->
            <form class="sign-in-form">
              <!-- 包含网站logo的容器 -->
              <div class="logo">

              </div>
              <!-- 包含标题和切换注册表单的链接的容器 -->
              <div class="heading">
                <h6 class="txtregist">🎈还没有注册吗?</h6>
                <a class="toggleregist" @click="toggleMainClass">🎠去注册</a>
              </div>
              <!-- 包含输入字段和提交按钮的容器 -->
              <div class="actual-form">
                <!-- 包含用户名输入字段的容器 -->
                <div class="input-wrap">
                  <input v-model="loginParam.account" type="text" minlength="4" autocomplete="off" required
                    class="input-field" @focus="nameflag = true" @blur="handleBlurName" :class="{ active: nameflag }" />
                  <label for="name">Name</label>
                </div>
                <!-- 包含密码输入字段的容器 -->
                <div class="input-wrap">
                  <input v-model="loginParam.password" type="password" autocomplete="off" required class="input-field"
                    @focus="passwordflag = true" @blur="handleBlurPassword" :class="{ active: passwordflag }" />
                  <label for="password">Password</label>
                </div>
                <!-- 登录表单的提交按钮 -->
                <input value="SIGN IN" class="sign-btn" @click="login" />
                <!-- 微信qq扫码登录 -->
                <div class="wxlogin">
                  <img class="wxPicture" src="../../../assets/file/wxa.png" @click="WXDialogVisible = true" />
                  <el-icon class="textwx">
                    <ArrowLeft />
                  </el-icon>
                  <div class="textwx">点击微信扫码登录</div>
                </div>

                <div class="wxlogin">
                  <img class="wxPicture" src="../../../assets/file/qqlogo.png" @click="QQDialogVisible = true" />
                  <el-icon class="textwx">
                    <ArrowLeft />
                  </el-icon>
                  <div class="textwx">点击QQ扫码登录</div>
                </div>


                <el-dialog v-model="WXDialogVisible" title="Warning" width="30%" align-center @open="wxopendialog">
                  <template #header>
                    <div id="login_container"></div>
                  </template>
                </el-dialog>

                <el-dialog v-model="QQDialogVisible" title="Warning" width="30%" align-center
                  :before-close="qqCloseDialog" @open="qqopendialog">
                  <template #header>
                    <el-image style="width: 100%; height: 100%;" :src="qqCodeImage">
                    </el-image>
                  </template>
                </el-dialog>
              </div>
            </form>
            <!-- 注册表单 -->
            <form autocomplete="off" class="sign-up-form">
              <!-- 包含网站logo的容器 -->
              <div class="logo">
                <!-- <img src="" alt=""> -->

              </div>
              <!-- 包含标题和切换登录表单的链接的容器 -->
              <div class="heading">
                <h2>🎪已经有了账号吗?</h2>

                <a class="togglelogin" @click="toggleMainClass">👑去登录</a>
              </div>
              <!-- 包含输入字段和提交按钮的容器 -->
              <div class="actual-form">
                <!-- 包含用户名输入字段的容器 -->
                <div class="input-wrap">
                  <input v-model="signNameValue" type="text" minlength="4" autocomplete="off" required
                    class="input-field" @focus="signnameflag = true" @blur="handleBlurSignName"
                    :class="{ active: signnameflag }" />
                  <label for="sign-name">Name</label>
                </div>
                <!-- 包含电子邮件输入字段的容器 -->
                <div class="input-wrap">
                  <input v-model="emailValue" type="email" autocomplete="off" required class="input-field"
                    @focus="emailflag = true" @blur="handleBlurEmail" :class="{ active: emailflag }" />
                  <label for="sign-email">Email</label>
                </div>
                <!-- 包含密码输入字段的容器 -->
                <div class="input-wrap">
                  <input v-model="signPasswordValue" type="password" autocomplete="off" required class="input-field"
                    @focus="signpasswordflag = true" @blur="handleBlurSignPassword"
                    :class="{ active: signpasswordflag }" />
                  <label for="sign-password">Password</label>
                </div>
                <!-- 注册表单的提交按钮 -->
                <input value="SIGN IN" class="sign-btn" />
                <!-- 同意服务条款和隐私协议的复选框 -->
                <p class="text">
                  <input type="checkbox" name="" id="" />注册前我已阅读并同意
                  <a>服务条款</a>和<a>隐私协议</a>
                </p>
              </div>
            </form>
          </div>
          <!-- 包含轮播图的容器 -->
          <div class="carousel">
            <!-- 包含轮播图图片的容器 -->
            <div class="images-wrapper">
              <img v-for="(image, index) in images" :key="index" :src="image.src" :class="[
                  'image',
                  'img-' + (index + 1),
                  index === currentImageIndex ? 'show' : '',
                ]" alt="" />
            </div>
            <!-- 包含轮播图文本和轮播图指示器的容器 -->
            <div class="text-slider">
              <!-- 包含轮播图文本的容器 -->
              <div class="text-wrap">
                <div class="text-group">

                </div>
              </div>
              <!-- 包含轮播图指示器的容器 -->
              <div class="bullets">
                <span v-for="(bullet, index) in 3" :key="index" @click="moveSlider(index)"
                  :class="['bullet', index === currentImageIndex ? 'active' : '']"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

  import { ref, reactive, getCurrentInstance, watchEffect } from "vue";
  import useUserStore from "@/store/modules/user";
  import { ElMessage } from "element-plus";
  import { onMounted } from 'vue'
  import { reqQQCheck } from '@/api/user'
  const { proxy } = getCurrentInstance();
  import { useRouter } from "vue-router";
  import axios from 'axios';
  import { reqQQLoginInfo } from '@/api/user'


  let $router = useRouter();
  let userStore = useUserStore();

  const WXDialogVisible = ref(false)
  const QQDialogVisible = ref(false)
  const nameflag = ref < Boolean > (false);
  const passwordflag = ref < Boolean > (false);
  const signnameflag = ref < Boolean > (false);
  const emailflag = ref < Boolean > (false);
  const signpasswordflag = ref < Boolean > (false);

  const loginParam = reactive({
    account: "",
    password: "",
  });

  const emailValue = ref("");
  const signNameValue = ref("");
  const signPasswordValue = ref("");

  const currentImageIndex = ref(0);

  const isSignUpMode = ref(false);
  const qqCodeImage = ref('')
  const qqacount = ref('')
  const qqname = ref('')
  const qqavartar = ref('')




  const images = [
    {
      src:
        "https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/68ff62863bb9fd90d6fd874802e08568.mp4.jpg",
    },
    { src: "https://wallpaper-static.cheetahfun.com/wallpaper/sites/scifi/pic5.jpg" },
    {
      src:
        "https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/8bc682fba0a8747155409b3bbc2676ac.mp4.jpg",
    },
  ]; // 图片数组

  const handleBlurName = () => {
    if (loginParam.account) {
      return;
    }
    nameflag.value = false;
  };

  const handleBlurPassword = () => {
    if (loginParam.password) {
      return;
    }
    passwordflag.value = false;
  };

  const handleBlurEmail = () => {
    if (emailValue.value) {
      return;
    }
    emailflag.value = false;
  };

  const handleBlurSignName = () => {
    if (signNameValue.value) {
      return;
    }
    signnameflag.value = false;
  };

  const handleBlurSignPassword = () => {
    if (signPasswordValue.value) {
      return;
    }
    signpasswordflag.value = false;
  };

  const toggleMainClass = () => {
    isSignUpMode.value = !isSignUpMode.value;
  };

  const moveSlider = (index) => {
    currentImageIndex.value = index;
  };

  const login = async () => {
    try {
      let use = {
        account: loginParam.account.trim(),
        password: proxy.$common.encrypt(loginParam.password.trim()),
      };

      //用户登录成功
      let userToken = await userStore.userLogin(use);
      if (userToken != null) {
        ElMessage({
          type: "success",
          message: "登录成功",
        });
        loginParam.password = "";
        loginParam.account = "";
        $router.push("/");
      }
    } catch (error) {
      ElMessage({
        type: "error",
        message: "登录失败",
      });
    }
  };



  const getCheckCode = () => {
    var state = parseInt(new Date().getTime / 1000)
    var obj = new WxLogin({
      self_redirect: true,
      id: "login_container",
      appid: "wxed9954c01bb89b47",
      scope: "snsapi_login",
      redirect_uri: "http://localhost:8160/api/user/wxLogin",
      state: state,
      style: "",
      href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICAgICBtYXJnaW4tcmlnaHQ6IDUwcHg7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiAgZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAucXJjb2RlIHsKICAgIGJvcmRlcjogbm9uZTsKICAgIHdpZHRoOiAyMDBweDsKICAgIGhlaWdodDogMjAwcHg7CiAgICBtYXJnaW4tcmlnaHQ6IDQ4cHg7Cn0KLmltcG93ZXJCb3ggLnN0YXR1c3sKICBkaXNwbGF5OiBub25lCn0KIGlmcmFtZXsKICAgICB3aWR0aDogMjAwcHg7CiAgICBoZWlnaHQ6IDIwMHB4Owp9"
    });
  }


  const getQQcodeImage = async () => {
    axios.get('/api/user/qqShowCode', { responseType: 'arraybuffer' })
      .then(response => {
        const imageBlob = new Blob([response.data], { type: 'image/jpeg' });
        qqCodeImage.value = URL.createObjectURL(imageBlob);
      })
      .catch(error => {
        console.error('Error fetching image', error);
      });
  }





  const wxopendialog = () => {
    getCheckCode()
  }

  let timerId; // 声明一个全局变量来保存定时器ID
  const qqopendialog = () => {
    getQQcodeImage()
    qqcheck()
  }

  const qqCloseDialog = () => {

    clearInterval(timerId)
    QQDialogVisible.value = false
  }


  const qqcheck = () => {
    timerId = setInterval(async () => {
      let result = await reqQQCheck()
      if (result.code === 200) {
        console.log(result.data);
        if (result.message?.includes("登录成功")) {
          qqacount.value = result.data.qqacount
          qqname.value = result.data.qqname
          qqavartar.value = result.data.qqavartar

          await getQQLoginInfo(qqacount.value)

          qqCloseDialog()


        }
      }
    }, 2000); // 每隔1秒执行一次
  }

  const getQQLoginInfo = async (qqacount) => {
    let result = await reqQQLoginInfo(qqacount)
    if (result.code == 200) {

      localStorage.setItem("currentUser", JSON.stringify(result.data));

      localStorage.setItem("userToken", result.data.accessToken);

      $router.push("/");
    }
  }

  let wxtimerId;
  const getWXUserInfo = () => {
    wxtimerId = setInterval(async () => {
      let result = await reqQQCheck()
      if (result.code === 200) {
        console.log(result.data);
        if (result.message?.includes("登录成功")) {
          qqacount.value = result.data.qqacount
          qqname.value = result.data.qqname
          qqavartar.value = result.data.qqavartar

          await getQQLoginInfo(qqacount.value)

          qqCloseDialog()


        }
      }
    }, 2000); // 每隔1秒执行一次
  }


  const closeDialog = () => {
    WXDialogVisible.value = false
  }

  let checkLoginTimer
  const checkLogin = () => {
    checkLoginTimer = setInterval(() => {
      if (localStorage.getItem("currentUser") && localStorage.getItem("userToken")) {
        WXDialogVisible.value = false
        $router.push('/')
      }
    }, 1000)
  }

  watchEffect(() => {
    if (WXDialogVisible.value) {
      checkLogin()
    } else {
      clearInterval(checkLoginTimer)
    }
  });

</script>
<style scoped>
  /* 重置所有元素的内边距、外边距和盒模型为border-box */
  *,
  *::after,
  *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  /* 设置页面背景颜色、字体颜色和背景图片 */
  .body {
    color: #fff;
    /* 设置字体颜色为白色 */
    background-image: url(https://n.sinaimg.cn/sinakd20220628ac/600/w1920h1080/20220628/8351-61870fe18d338854b585d36a640ae208.jpg);
    /* 设置背景图片 */
    background-repeat: no-repeat;
    /* 设置背景图片不重复 */
    background-size: cover;
    /* 设置背景图片覆盖整个页面 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    /* 设置字体 */
  }

  /* 设置主要区域的样式 */
  .main {
    width: 100%;
    /* 设置主要区域的宽度为100% */
    overflow: hidden;
    /* 隐藏主要区域的溢出内容 */
    min-height: 100vh;
    /* 设置主要区域的最小高度为视口高度 */
    padding: 2rem;
    /* 设置主要区域的内边距为2rem */
    display: flex;
    /* 将主要区域的子元素设置为flex布局 */
    align-items: center;
    /* 在主轴上居中对齐子元素 */
    justify-content: center;
    /* 在交叉轴上居中对齐子元素 */
  }

  /* 设置.box的样式 */
  .box {
    width: 100%;
    /* 设置.box的宽度为100% */
    max-width: 1020px;
    /* 设置.box的最大宽度为1020px */
    height: 640px;
    /* 设置.box的高度为640px */
    background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F23%2F20180123164924_kYVLa.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704968025&t=896c74711ea7cfcb12ebf1fe026e7e3a);
    /* 设置.box的背景图片 */
    background-repeat: no-repeat;
    /* 设置.box的背景图片不重复 */
    background-size: cover;
    /* 设置.box的背景图片覆盖整个区域 */
    position: relative;
    /* 设置.box的定位为相对定位 */
    border-radius: 3.3rem;
    /* 设置.box的圆角半径为3.3rem */
    box-shadow: 0 0 20px #b7b2a9;
    /* 设置.box的阴影效果 */
  }

  /* 设置.inner-box的样式 */
  .inner-box {
    position: absolute;
    /* 设置.inner-box的定位为绝对定位 */
    width: calc(100% - 4.1rem);
    /* 设置.inner-box的宽度为100%减去4.1rem */
    height: calc(100% - 4.1rem);
    /* 设置.inner-box的高度为100%减去4.1rem */
    top: 50%;
    /* 设置.inner-box的顶部距离为50% */
    left: 50%;
    /* 设置.inner-box的左侧距离为50% */
    transform: translate(-50%, -50%);
    /* 设置.inner-box的位置为居中 */
  }

  /* 设置.forms-wrap的样式 */
  .forms-wrap {
    position: absolute;
    /* 设置.forms-wrap的定位为绝对定位 */
    height: 100%;
    /* 设置.forms-wrap的高度为100% */
    width: 45%;
    /* 设置.forms-wrap的宽度为45% */
    left: 0;
    /* 设置.forms-wrap的左侧距离为0 */
    top: 0;
    /* 设置.forms-wrap的顶部距离为0 */
    display: grid;
    /* 将.forms-wrap的子元素设置为grid布局 */
    grid-template-columns: 1fr;
    /* 设置.forms-wrap的列数为1 */
    grid-template-rows: 1fr;
    /* 设置.forms-wrap的行数为1 */
    transition: 0.8s ease-in-out;
    /* 设置.forms-wrap的过渡效果 */
  }

  /* 设置form的样式 */
  form {
    max-width: 260px;
    /* 设置form的最大宽度为260px */
    width: 100%;
    /* 设置form的宽度为100% */
    margin: 0 auto;
    /* 设置form的水平居中 */
    height: 100%;
    /* 设置form的高度为100% */
    display: flex;
    /* 将form的子元素设置为flex布局 */
    flex-direction: column;
    /* 设置form的子元素在垂直方向上排列 */
    justify-content: space-evenly;
    /* 在form的子元素之间均匀分布空间 */
    grid-column: 1/2;
    /* 设置form的列为1到2 */
    grid-row: 1/2;
    /* 设置form的行为1到2 */
    transition: opacity 0.02s 0.4s;
    /* 设置form的过渡效果 */
  }

  /* 设置.sign-up-form的样式 */
  form.sign-up-form {
    opacity: 0;
    /* 设置.sign-up-form的透明度为0 */
    pointer-events: none;
    /* 禁用.sign-up-form的鼠标事件 */
  }

  /* 设置.logo的样式 */
  .logo {
    display: flex;
    /* 将.logo的子元素设置为flex布局 */
    align-items: center;
    /* 在.logo的子元素之间垂直居中 */
  }

  /* 设置.logo img的样式 */
  .logo img {
    height: 27px;
    /* 设置.logo img的高度为27px */
    margin-right: 0.3rem;
    /* 设置.logo img的右侧外边距为0.3rem */
  }

  /* 设置.logo h4的样式 */
  .logo h4 {
    font-size: 1.1rem;
    /* 设置.logo h4的字体大小为1.1rem */
    letter-spacing: 0.5px;
    /* 设置.logo h4的字母间距为0.5px */
    color: #151111;
    /* 设置.logo h4的字体颜色为#151111 */
  }

  /* 选择所有具有.heading类的元素下的h2元素 */
  .heading h2 {
    /* 设置字体大小为2.1rem */
    font-size: 1.6rem;
    /* 设置字体粗细为600 */
    font-weight: 600;
    /* 设置字体颜色为#151111 */
    color: aqua;
  }

  /* 选择所有具有.heading类的元素下的h6元素 */
  .txtregist {
    /* 设置字体大小为0.75rem */
    font-size: 1.6rem;
    /* 设置字体粗细为400 */
    font-weight: 400;

    /* 设置字体颜色为#bababa */
    color: aqua;
  }

  /* 选择所有具有.toggle类的元素 */
  .toggleregist {
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 设置文本阴影 */
    text-shadow: 0 0 20px #bababa;
    /* 去除文本装饰 */
    text-decoration: none;
    /* 设置字体大小为0.75rem */
    font-size: 1.75rem;
    /* 设置字体粗细为500 */
    font-weight: 500;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
  }

  .togglelogin {
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 设置文本阴影 */
    text-shadow: 0 0 20px #bababa;
    /* 去除文本装饰 */
    text-decoration: none;
    /* 设置字体大小为0.75rem */
    font-size: 1.75rem;
    /* 设置字体粗细为500 */
    font-weight: 500;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
  }

  /* 当鼠标悬停在.toggle元素上时 */
  .toggle:hover {
    /* 设置字体颜色为#8371f6 */
    color: #8371f6;
  }

  /* 选择所有具有.input-wrap类的元素 */
  .input-wrap {
    /* 设置相对定位 */
    position: relative;
    /* 设置高度为37像素 */
    height: 37px;
    /* 设置下边距为2rem */
    margin-bottom: 2rem;
  }

  /* 选择所有具有.input-field类的元素 */
  .input-field {
    /* 设置绝对定位 */
    position: absolute;
    /* 设置宽度为100% */
    width: 100%;
    /* 设置高度为100% */
    height: 100%;
    /* 设置背景为透明 */
    background: none;
    /* 去除边框 */
    border: none;
    /* 去除外边框 */
    outline: none;
    /* 设置底部边框为1像素的实线，颜色为#bbb */
    border-bottom: 1px solid #bbb;
    /* 去除内边距 */
    padding: 0;
    /* 设置字体大小为0.95rem */
    font-size: 0.95rem;
    /* 设置字体颜色为#151111 */
    color: #151111;
    /* 设置过渡效果为0.4秒 */
    transition: 0.4s;
  }

  /* 选择所有label元素 */
  label {
    /* 设置绝对定位 */
    position: absolute;
    /* 设置左侧为0 */
    left: 0;
    /* 设置顶部为50% */
    top: 50%;
    /* 将元素向上移动50% */
    transform: translateY(-50%);
    /* 设置字体大小为0.95rem */
    font-size: 0.95rem;
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 禁用指针事件 */
    pointer-events: none;
    /* 设置过渡效果为0.4秒 */
    transition: 0.4s;
  }

  /* 当输入框处于活动状态时 */
  .input-field:active {
    /* 设置底部边框颜色为#151111 */
    border-bottom-color: #151111;
  }

  /* 当输入框处于活动状态时，其后面的label元素 */
  .input-field.active+label {
    /* 设置字体大小为0.75rem */
    font-size: 0.75rem;
    /* 将元素向上移动2像素 */
    top: -2px;
  }

  /* 选择所有具有.sign-btn类的元素 */
  .sign-btn {
    /* 设置为内联块元素 */
    display: inline-block;
    /* 设置宽度为100% */
    width: 100%;
    /* 设置高度为43像素 */
    height: 43px;
    /* 设置背景颜色为#151111 */
    background: #b7b2a9;
    /* 设置字体颜色为白色 */
    color: #fff;
    /* 去除边框 */
    border: none;
    /* 设置光标为手型 */
    cursor: pointer;
    /* 设置圆角为0.8rem */
    border-radius: 0.8rem;
    /* 设置下边距为2rem */
    margin-bottom: 2rem;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
    text-align: center;
  }

  /* 当鼠标悬停在.sign-btn元素上时 */
  .sign-btn:hover {
    /* 设置背景颜色为#8371f6 */
    background-color: #8371f6;
  }

  /* 选择所有具有.text类的元素 */
  .text {
    /* 设置为弹性盒子 */
    display: flex;
    /* 设置字体颜色为白色 */
    color: white;
    /* 设置文本阴影 */
    text-shadow: 0 0 20px #b7b2a9;
    /* 设置字体大小为0.7rem */
    font-size: 0.7rem;
  }

  /* 选择所有.text元素内的a元素 */
  .text a {
    /* 设置字体颜色为#bbb */
    color: #bbb;
    /* 设置过渡效果为0.3秒 */
    transition: 0.3s;
  }

  /* 当鼠标悬停在.text元素内的a元素上时 */
  .text a:hover {
    /* 设置字体颜色为#8371f6 */
    color: #8371f6;
  }

  /* 当处于注册模式下的登录表单 */
  .main.sign-up-mode form.sign-in-form {
    /* 设置透明度为0 */
    opacity: 0;
    /* 禁用指针事件 */
    pointer-events: none;
  }

  /* 当处于注册模式下的注册表单 */
  .main.sign-up-mode form.sign-up-form {
    /* 设置透明度为1 */
    opacity: 1;
    /* 启用指针事件 */
    pointer-events: all;
  }

  /* 当处于注册模式下的表单容器 */
  .main.sign-up-mode .forms-wrap {
    /* 设置左侧位置为55% */
    left: 55%;
  }

  /* 当处于注册模式下的轮播容器 */
  .main.sign-up-mode .carousel {
    /* 设置左侧位置为0% */
    left: 0%;
  }

  /* 选择所有.carousel元素 */
  .carousel {
    /* 设置圆角为2rem */
    border-radius: 2rem;
    /* 设置内边距为2rem */
    padding: 2rem;
    /* 设置为绝对定位 */
    position: absolute;
    /* 设置溢出隐藏 */
    overflow: hidden;
    /* 设置高度为100% */
    height: 100%;
    /* 设置宽度为55% */
    width: 55%;
    /* 设置左侧位置为45% */
    left: 45%;
    /* 设置顶部位置为0 */
    top: 0;
    /* 设置阴影效果 */
    box-shadow: 0 0 5px #b7b2a9;
    /* 设置背景颜色为透明 */
    background-color: transparent;
    /* 设置为网格布局 */
    display: grid;
    /* 设置过渡效果为0.8秒 */
    transition: 0.8s ease-in-out;
    /* 设置为相对定位 */
    position: relative;
    /* 设置网格行模板 */
    grid-template-rows: auto 1fr;
  }

  /* 选择所有.images-wrapper元素 */
  .images-wrapper {
    /* 设置为网格布局 */
    display: grid;
    /* 设置网格列模板 */
    grid-template-columns: 2fr;
    /* 设置网格行模板 */
    grid-template-rows: 1fr;
  }

  /* 选择所有.image元素 */
  .image {
    /* 设置宽度为100% */
    width: 100%;
    /* 设置网格列为1到2 */
    grid-column: 1/2;
    /* 设置网格行为1到2 */
    grid-row: 1/2;
    /* 设置透明度为0 */
    opacity: 0;
    /* 设置过渡效果 */
    transition: opacity 0.3s, transform 0.5s;
  }

  /* 选择所有.img-1元素 */
  .img-1 {
    /* 设置向上平移50像素 */
    transform: translate(0, -50px);
  }

  /* 选择所有.img-2元素 */
  .img-2 {
    /* 设置水平和垂直缩放 */
    transform: scale(0.4, 0.5);
  }

  /* 选择所有.img-3元素 */
  .img-3 {
    /* 设置缩放和旋转 */
    transform: scale(0.3), rotate((-20deg));
  }

  /* 选择所有具有.show类的.image元素 */
  .image.show {
    /* 设置透明度为1 */
    opacity: 1;
    /* 取消所有变换效果 */
    transform: none;
  }

  /* 选择所有.text-slider元素 */
  .text-slider {
    /* 设置为flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 设置主轴方向为垂直 */
    flex-direction: column;
  }

  /* 选择所有.text-wrap元素 */
  .text-wrap {
    /* 设置最大高度为2.2rem */
    max-height: 2.2rem;
    /* 超出部分隐藏 */
    overflow: hidden;
    /* 底部外边距为2.5rem */
    margin-bottom: 2.5rem;
  }

  /* 选择所有.text-group元素 */
  .text-group {
    /* 设置为flex布局 */
    display: flex;
    /* 设置主轴方向为垂直 */
    flex-direction: column;
    /* 文本居中 */
    text-align: center;
    /* 初始位置为不偏移 */
    transform: translateY(0);
    /* 过渡效果为0.5秒 */
    transition: 0.5s;
  }

  /* 选择所有.text-group元素下的h2元素 */
  .text-group h2 {
    /* 设置行高为2.2rem */
    line-height: 2.2rem;
    /* 设置字体粗细为600 */
    font-weight: 600;
    /* 设置字体大小为1.6rem */
    font-size: 1.6rem;
  }

  /* 选择所有.bullets元素 */
  .bullets {
    /* 顶部外边距为20px */
    margin-top: 20px;
    /* 设置为flex布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
  }

  /* 选择所有.bullets元素下的span元素 */
  .bullets span {
    /* 设置为块级元素 */
    display: block;
    /* 宽度为0.5rem */
    width: 0.5rem;
    /* 高度为0.5rem */
    height: 0.5rem;
    /* 圆角为0.2rem */
    border-radius: 0.2rem;
    /* 背景颜色为白色 */
    background-color: white;
    /* 设置阴影 */
    box-shadow: 20px #b7b2a9;
    /* 左右外边距为0.25rem */
    margin: 0 0.25rem;
    /* 鼠标指针为手型 */
    cursor: pointer;
    /* 过渡效果为0.3秒 */
    transition: 0.3s;
  }

  /* 选择所有.bullets元素下的.active元素 */
  .bullets span.active {
    /* 宽度为1.1rem */
    width: 1.1rem;
    /* 背景颜色为aqua */
    background-color: aqua;
    /* 圆角为1rem */
    border-radius: 1rem;
  }

  /* 当屏幕宽度小于等于850px时生效 */
  @media (max-width: 850px) {

    /* 选择所有.box元素 */
    .box {
      /* 高度自适应 */
      height: auto;
      /* 最大宽度为550px */
      max-width: 550px;
      /* 溢出隐藏 */
      overflow: hidden;
    }

    /* 选择所有.inner-box元素 */
    .inner-box {
      /* 位置为默认值 */
      position: static;
      /* 变换为默认值 */
      transform: none;
      /* 宽度为默认值 */
      width: revert;
      /* 高度为默认值 */
      height: revert;
      /* 上下左右内边距为2rem */
      padding: 2rem;
    }

    /* 选择所有.forms-wrap元素 */
    .forms-wrap {
      /* 位置为默认值 */
      position: revert;
      /* 宽度为100% */
      width: 100%;
      /* 高度为100% */
      height: 100%;
    }

    /* 选择所有.form元素 */
    .form {
      /* 最大宽度为默认值 */
      max-width: revert;
      /* 上内边距为1.5rem，左右内边距为2.5rem，下内边距为2rem */
      padding: 1.5rem 2.5rem 2rem;
      /* 过渡效果为0.8秒，缓动函数为ease-in-out，透明度过渡效果为线性 */
      transition: transform 0.8s ease-in-out, opacity 0.4s linear;
    }

    /* 选择所有.heading元素 */
    .heading {
      /* 上下外边距为2rem，左右外边距为0 */


      margin: 2rem 0;
    }

    /* 选择所有.sign-up-form元素 */
    form.sign-up-form {
      /* 向右偏移100% */
      transform: translateX(100%);
    }

    /* 选择所有.sign-up-mode元素下的.sign-in-form元素 */
    .main.sign-up-mode form.sign-in-form {
      /* 向左偏移100% */
      transform: translateX(-100%);
    }

    /* 选择所有.sign-up-mode元素下的.sign-up-form元素 */
    .main.sign-up-mode form.sign-up-form {
      /* 不偏移 */
      transform: translateX(0%);
    }

    /* 选择所有.carousel元素 */
    .carousel {
      /* 位置为默认值 */
      position: revert;
      /* 高度自适应 */
      height: auto;
      /* 宽度为100% */
      width: 100%;
      /* 上下内边距为3rem，左右内边距为2rem */
      padding: 3rem 2rem;
      /* 设置为flex布局 */
      display: flex;
    }

    /* 选择所有.images-wrapper元素 */
    .images-wrapper {
      /* 隐藏 */
      display: none;
    }

    /* 选择所有.text-slider元素 */
    .text-slider {
      /* 宽度为100% */
      width: 100%;
    }
  }

  /* 当屏幕宽度小于等于530px时生效 */
  @media (max-width: 530px) {

    /* 选择所有main元素 */
    .main {
      /* 上下左右内边距为1rem */
      padding: 1rem;
    }

    /* 选择所有.box元素 */
    .box {
      /* 边框半径为2rem */
      border-radius: 2rem;
    }

    /* 选择所有.inner-box元素 */
    .inner-box {
      /* 上下左右内边距为1rem */
      padding: 1rem;
    }

    /* 选择所有.carousel元素 */
    .carousel {
      /* 上下内边距为1.5rem，左右内边距为1rem */
      padding: 1.5rem 1rem;
      /* 边框半径为1.6rem */
      border-radius: 1.6rem;
    }

    /* 选择所有.text-wrap元素 */
    .text-wrap {
      /* 下外边距为1rem */
      margin-bottom: 1rem;
    }

    /* 选择所有.text-group元素下的h2元素 */
    .text-group h2 {
      /* 字体大小为1.2rem */
      font-size: 1.2rem;
    }

    /* 选择所有form元素 */
    form {
      /* 上内边距为1rem，左右内边距为2rem，下内边距为1.5rem */
      padding: 1rem 2rem 1.5rem;
    }
  }

  .wxPicture {
    height: 50px;
    width: 50px;

  }

  #login_container {
    width: 200px;
    height: 200px;
  }

  .wxlogin {
    display: flex;


  }

  .textwx {
    margin-top: 19px;
    text-align: center;
    font-family: SmileySans;
  }

  .txtregist {

    font-family: SmileySans;
  }
</style>